<template>
  <div class="panel">
    <panel-title :title="$route.meta.title">
      <div>
        <router-link :to="{name: 'tableAdd'}" tag="span">
          <el-button type="primary" icon="plus" size="small">添加频道</el-button>
        </router-link>
      </div>
    </panel-title>
    <div class="panel-title">
      <el-date-picker v-model="searchParams.liveStartdate"
                      type="datetime"
                      format="yyyy-MM-dd HH:mm:ss"
                      :editable="false"
                      placeholder="直播开始时间"
                      style="width: 250px;">
      </el-date-picker>
      <el-date-picker v-model="searchParams.liveEnddate"
                      type="datetime"
                      format="yyyy-MM-dd HH:mm:ss"
                      :editable="false"
                      placeholder="直播结束时间"
                      style="width: 250px;">
      </el-date-picker>
      <el-input placeholder="频道名称" :maxlength="100" v-model="searchParams.channelName"
                style="width: 200px;"></el-input>
      <el-input placeholder="直播名称" :maxlength="100" v-model="searchParams.activityName"
                style="width: 200px;"></el-input>
      <el-select v-model="searchParams.liveStatus" placeholder="请选择直播状态">
        <el-option v-for="item in liveStatus"
                   :label="item.text"
                   :key="item.value"
                   :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="searchParams.onlineStatus" placeholder="请选择上线状态">
        <el-option v-for="item in onlineStatus"
                   :label="item.text"
                   :key="item.value"
                   :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" icon="search" size="small" @click="search">查询</el-button>
      <el-button type="primary" icon="minus" size="small" @click="reset">重置</el-button>
    </div>
    <div class="panel-body">
      <el-table
        :data="table_data"
        v-loading="load_data"
        element-loading-text="拼命加载中"
        border
        style="width: 100%;">
        <el-table-column
          prop="channelId"
          label="频道ID"
        >
        </el-table-column>
        <el-table-column
          prop="channelName"
          label="频道名称"
        >
        </el-table-column>
        <el-table-column
          prop="coverPath"
          label="频道图片"
        >
          <template slot-scope="scope">
            <img :src="scope.row.coverPath" alt="" style="width: 80px;height: 80px">
          </template>
        </el-table-column>
        <el-table-column
          prop="activityName"
          label="直播名称"
        >
        </el-table-column>
        <el-table-column
          prop="brandLogoPath"
          label="直播封面"
        >
          <template slot-scope="scope">
            <img :src="scope.row.brandLogoPath" alt="" style="width: 80px;height: 80px">
          </template>
        </el-table-column>
        <el-table-column
          label="APP直播活动地址"
        >
          <template slot-scope="scope">
            <a :href="'http://'+scope.row.activityLinkurl"
               target="_blank"
               class="buttonText">{{scope.row.activityLinkurl}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="liveStartdate"
          label="直播开始时间"
          :formatter="timestampToTime"
        >
        </el-table-column>
        <el-table-column
          prop="liveEnddate"
          label="直播结束时间"
          :formatter="timestampToTime"
        >
        </el-table-column>
        <el-table-column
          label="主播名称"
        >
          <template slot-scope="scope">
            {{scope.row.model1Name}}
            {{scope.row.model2Name}}
          </template>
        </el-table-column>
        <el-table-column
          label="身高"
        >
          <template slot-scope="scope">
            {{scope.row.model1Height}}
            {{scope.row.model2Height}}
          </template>
        </el-table-column>
        <el-table-column
          label="体重"
        >
          <template slot-scope="scope">
            {{scope.row.model1Weight}}
            {{scope.row.model2Weight}}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="timestampToTime"
        >
        </el-table-column>
        <!--<el-channel-column-->
        <!--prop="createUser"-->
        <!--label="创建人"-->
        <!--&gt;-->
        <!--</el-channel-column>-->
        <el-table-column
          prop="liveStatus"
          label="直播状态"
          :formatter="liveStatusFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="onlineStatus"
          label="上线状态"
          :formatter="onlineStatusFormatter"
        >
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template scope="props">
            <el-button v-if="props.row.onlineStatus===1" type="danger" size="small" icon="caret-bottom"
                       @click="go_offline(props.row)">下线
            </el-button>
            <el-button v-if="props.row.onlineStatus!==1" type="info" size="small" icon="caret-top"
                       @click="go_online(props.row)">上线
            </el-button>
            <router-link :to="{name: 'tableUpdate', params: {liveGuid: props.row.liveGuid}}" tag="span">
              <el-button v-if="props.row.liveStatus!==5" type="info"  size="small" icon="edit">编辑</el-button>
            </router-link>
            <el-button v-if="props.row.liveStatus===1" type="info" size="small" @click="h5_play(props.row.liveGuid)" icon="edit"> 观看</el-button>
            <el-button type="info" size="small" icon="edit" @click="show_password(props.row)">查看密码</el-button>
            <el-button v-if="props.row.liveStatus!==5" type="danger" size="small" icon="close"
                       @click="close_channel(props.row)">关闭
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <bottom-tool-bar>
        <div slot="page">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="length"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </bottom-tool-bar>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {panelTitle, bottomToolBar} from 'components'
  import {live_pull_url} from 'common/config'
  export default {
    data() {
      return {
        searchParams: {},
        table_data: null,
        //当前页码
        currentPage: 1,
        //数据总条目
        total: 0,
        //每页显示多少条数据
        length: 10,
        //请求时的loading效果
        load_data: true,
        //批量选择数组
        batch_select: [],
        onlineOption: [],
        liveOption: [],
        onlineStatus: [
          {value: 0, text: "未上线"},
          {value: 1, text: "已上线"},
          {value: 2, text: "已下线"}
        ],
        liveStatus: [
          {value: 0, text: "未开始"},
          {value: 9, text: "未推流"},
          {value: 1, text: "推流中"},
          {value: 2, text: "暂停推流"},
          {value: 3, text: "推流中断"},
          {value: 4, text: "结束"},
          {value: 5, text: "关闭"}

        ]
      }
    },
    components: {
      panelTitle,
      bottomToolBar
    },
    created() {
      this.get_table_data()
    },
    methods: {
      //获取数据
      get_table_data() {
        this.load_data = true
        if (this.searchParams !== {}) {
          this.search()
          return
        }
        this.$fetch.api_channel.list(this.currentPage, {
          size: this.length
        })
          .then(({data: {data, page, totalSize}}) => {
            this.table_data = data
            this.total = totalSize
            this.load_data = false
          })
          .catch(() => {
            this.load_data = false
          })
      },
      search() {
        this.load_data = true
        this.$fetch.api_channel.search(this.currentPage, this.length, this.searchParams)
          .then(({data}) => {
            if (data !== null) {
              this.table_data = data.data
              this.total = data.totalSize
              this.load_data = false
            } else {
              this.table_data = {}
              this.total = 0
              this.load_data = false
            }

          })
          .catch(() => {
            this.load_data = false
          })
      },
      //关闭推流
      close_channel(item) {
        this.$confirm('是否要关闭推流', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.load_data = true
            this.$fetch.api_channel.close(item.liveGuid)
              .then(({msg}) => {
                this.get_table_data()
                this.$message.success(msg)
              })
              .catch(() => {
              })
          })
          .catch(() => {
          })
      },
      //上线
      go_online(item) {
        this.$confirm('是否确定上线', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$fetch.api_channel.change_online(item.liveGuid, 1)
              .then(({msg}) => {
                this.get_table_data()
                this.$message.success(msg)
              })
              .catch(() => {
              })
          })
          .catch(() => {
          })
      },
      //下线
      go_offline(item) {
        this.$confirm('是否确定下线', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$fetch.api_channel.change_online(item.liveGuid, 2)
              .then(({msg}) => {
                this.get_table_data()
                this.$message.success(msg)
              })
              .catch(() => {
              })
          })
          .catch(() => {
          })
      },
      h5_play(guid){
        window.open(live_pull_url+"?guid="+guid, "_blank")
      },
      show_password(item) {
        this.$alert('频道ID: ' + item.channelId + ' 频道密码: ' + item.channelPassword, '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
      },
      timestampToTime(value, row, col) {
        var date = new Date(col)
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' '
        var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return Y + M + D + h + m + s
      },
      liveStatusFormatter(value, row, col) {
        switch (col) {
          case 0:
            return '未开始'
          case 1:
            return '推流中'
          case 2:
            return '暂停推流'
          case 3:
            return '推流中断'
          case 4:
            return '结束'
          case 5:
            return '关闭'
          case 9:
            return '未推流'
          default:
            return '异常'
        }
      },
      onlineStatusFormatter(value, row, col) {
        switch (col) {
          case 0:
            return '未上线'
          case 1:
            return '已上线'
          case 2:
            return '已下线'
          default:
            return '异常'
        }
      },
      reset() {
        this.searchParams = {}
      },
      //页码选择
      handleCurrentChange(val) {
        this.currentPage = val
        this.get_table_data()
      },
    }
  }
</script>
